<template>
  <div className="chart-box">
    <div id="chart-6" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["myStart", "myEnd", "myType"],
  name: "",
  data() {
    return {
      charts: "",
      start: this.myStart,
      end: this.myEnd,
      local: [],
      nonlocal: [],
    };
  },
  // created() {

  // },
  mounted() {
    //调用
    // this.$nextTick(() => {
    //   this.drawLine();
    // });

    if (!this.start || !this.end) {
      this.axios({
        url: "grad/yearList",
        methods: "get",
      }).then((res) => {
        let years = res.data.data;

        years = years.sort(function (a, b) {
          return a - b;
        });
        //默认为最近一年
        this.start = years[years.length - 1];
        this.end = years[years.length - 1];
        this.initData(this.start, this.end);
      });
    } else {
      this.initData(this.start, this.end);
    }
  },
  computed: {
    myChart() {
      return echarts.init(document.getElementById("chart-6"));
    },
  },
  methods: {
    //初始化数据
    initData(start, end) {
      this.axios({
        url: "grad/backToOrigin",
        method: "get",
        params: {
          start: this.start,
          end: this.end,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      })
        .then((res) => {
          console.log(res);
          let names = ["回户籍地", "未回户籍地"];
          let result = [];
          let result2 = [];
          for (let i = 0; i < res.data.data.length; i++) {
            let obj = res.data.data[i];
            if (obj.year == 0) {
              //山东籍
              let temp = {};
              temp.value = obj.rate;
              temp.name = names[0];
              result.push(temp);
              let nontemp = {};
              nontemp.value = 1 - obj.rate;
              nontemp.name = names[1];
              result.push(nontemp);
            } else {
              //非山东籍
              let temp = {};
              temp.value = obj.rate;
              temp.name = names[0];
              result2.push(temp);
              let nontemp = {};
              nontemp.value = 1 - obj.rate;
              nontemp.name = names[1];
              result2.push(nontemp);
            }
          }
          this.local = result;
          this.nonlocal = result2;
          this.drawLine();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawLine() {
      this.myChart = echarts.init(document.getElementById("chart-6"));
      let that = this;
      this.myChart.setOption({
        // title: {
        //   text: "回生源地就业的学生情况",
        //   left: "center",
        //   top: 30,
        // },
        tooltip: {
          trigger: "item",
        },
        legend: {
          // top: "5%",
          left: "center",
          bottom: 10,
        },
        series: [
          {
            name: "山东籍",
            type: "pie",
            // radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            radius: [20, 120],
            center: ["30%", "50%"],
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: that.local,
          },
          {
            name: "非山东籍",
            type: "pie",
            // radius: ["40%", "70%"],
            radius: [20, 120],
            center: ["70%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: that.nonlocal,
          },
        ],
      });
    },
    goTo(route) {
      this.$router.push(route);
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>
